// 简单的占位图片URL生成器
export const placeholderImages = {
  banner: (id) => `data:image/svg+xml;base64,${btoa(`
    <svg width="1920" height="600" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad${id}" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#FF6B6B;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#4ECDC4;stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect width="100%" height="100%" fill="url(#grad${id})"/>
      <text x="50%" y="50%" font-family="Arial" font-size="48" fill="white" text-anchor="middle" dy=".3em">Banner ${id}</text>
    </svg>
  `)}`,
  
  video: (id) => `data:image/svg+xml;base64,${btoa(`
    <svg width="400" height="225" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad${id}" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#F38BA8;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#A8DADC;stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect width="100%" height="100%" fill="url(#grad${id})"/>
      <text x="50%" y="50%" font-family="Arial" font-size="24" fill="white" text-anchor="middle" dy=".3em">Video ${id}</text>
    </svg>
  `)}`,
  
  thumbnail: (id) => `data:image/svg+xml;base64,${btoa(`
    <svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad${id}" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#A8DADC;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#FFB4A2;stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect width="100%" height="100%" fill="url(#grad${id})"/>
      <text x="50%" y="50%" font-family="Arial" font-size="16" fill="white" text-anchor="middle" dy=".3em">Thumb ${id}</text>
    </svg>
  `)}`,
  
  avatar: (id) => `data:image/svg+xml;base64,${btoa(`
    <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
      <circle cx="20" cy="20" r="20" fill="#95E1D3"/>
      <text x="50%" y="50%" font-family="Arial" font-size="16" fill="white" text-anchor="middle" dy=".3em">${id}</text>
    </svg>
  `)}`,
  
  detail: (id) => `data:image/svg+xml;base64,${btoa(`
    <svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad${id}" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#FFB4A2;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#F1C0E8;stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect width="100%" height="100%" fill="url(#grad${id})"/>
      <text x="50%" y="50%" font-family="Arial" font-size="32" fill="white" text-anchor="middle" dy=".3em">Detail ${id}</text>
    </svg>
  `)}`,
  
  category: (id) => `data:image/svg+xml;base64,${btoa(`
    <svg width="320" height="180" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad${id}" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#F1C0E8;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#4ECDC4;stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect width="100%" height="100%" fill="url(#grad${id})"/>
      <text x="50%" y="50%" font-family="Arial" font-size="20" fill="white" text-anchor="middle" dy=".3em">Category ${id}</text>
    </svg>
  `)}`,
  
  search: (id) => `data:image/svg+xml;base64,${btoa(`
    <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad${id}" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#4ECDC4;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#95E1D3;stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect width="100%" height="100%" fill="url(#grad${id})"/>
      <text x="50%" y="50%" font-family="Arial" font-size="18" fill="white" text-anchor="middle" dy=".3em">Search ${id}</text>
    </svg>
  `)}`,
  
  user: (id) => `data:image/svg+xml;base64,${btoa(`
    <svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
      <circle cx="40" cy="40" r="40" fill="#95E1D3"/>
      <text x="50%" y="50%" font-family="Arial" font-size="24" fill="white" text-anchor="middle" dy=".3em">${id}</text>
    </svg>
  `)}`,
  
  collect: (id) => `data:image/svg+xml;base64,${btoa(`
    <svg width="300" height="180" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad${id}" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#FFB4A2;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#F1C0E8;stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect width="100%" height="100%" fill="url(#grad${id})"/>
      <text x="50%" y="50%" font-family="Arial" font-size="18" fill="white" text-anchor="middle" dy=".3em">Collect ${id}</text>
    </svg>
  `)}`
}
